<div [formGroup]="configuration.formGroupReference">
    <label [ngClass]="configuration.iconLabel ? 'd-flex' : 'row'">
        <ng-container *ngIf="configuration.showLabel">
            <span *ngIf="configuration.iconLabel" class="input-group-text h-100 d-block">
                <em class="fa" [ngClass]="configuration.iconLabel"></em
            ></span>
            <span *ngIf="!configuration.iconLabel" class="col-4 col-form-label">
                {{ labelTranslationKey | translate }} {{ configuration.required ? "*" : "" }}
            </span>
        </ng-container>
        <span class="col" [ngClass]="configuration.iconLabel ? 'p-0' : ''">
            <input
                type="text"
                [formControlName]="configuration.formControlId"
                class="form-control qa-{{ configuration.qaPrefix }}-{{ configuration.formControlId }}"
                placeholder="{{ getPlaceholderTranslationKey | translate }}"
                [required]="configuration.required"
                [minlength]="configuration.minlength"
                [maxlength]="currentMaxLength"
                [pattern]="pattern"
                #text
            />
            <div class="row">
                <app-form-input-error
                    class="invalid-feedback col"
                    [formGroupReference]="configuration.formGroupReference"
                    [formControlId]="configuration.formControlId"
                >
                </app-form-input-error>
                <span *ngIf="countdown" class="col text-right">
                    <small>
                        <em>
                            {{ "productdetail.character.remain" | translate }}
                            {{ currentMaxLength - text.value.length }}
                        </em>
                    </small>
                </span>
            </div>
        </span>
    </label>
</div>
